import Card from '@/pages/iot/components/Card.tsx';
import { useCatch } from '@/hooks';
import { useQuery } from '@tanstack/react-query';
import IotServices from '@/api/services/iotServices.ts';
import { FC, useMemo, useRef } from 'react';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import { useEcharts } from '@/hooks';
import { useTheme } from '@/store/settingsStore.ts';
import { style, ThemeMode } from '@ycx/ui';

type EChartOption = echarts.EChartOption;

type Props = {
  carNo?: string;
};
const AlarmTrend: FC<Props> = ({ carNo }) => {
  const theme = useTheme();
  const isLight = useMemo(() => {
    return theme === ThemeMode.Light;
  }, [theme]);
  const catchFn = useCatch();

  const { data } = useQuery({
    queryKey: ['alarmTrend', carNo],
    queryFn: () => catchFn(() => IotServices.getAlarmTrend({ carNo })),
    select: ({ data }) => data,
    staleTime: 0,
  });

  const chartRef = useRef<HTMLDivElement>(null);

  const option = useMemo<EChartOption>(() => {
    return {
      grid: {
        top: 30,
        bottom: 20,
        left: 30,
        right: 1,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        boundaryGap: false,
        axisLabel: {
          alignMinLabel: 'left',
          alignMaxLabel: 'right',
          rich: {
            // 定义一个富文本样式，用于右对齐和左对齐的标签
            right: {
              align: 'right',
            },
            left: {
              align: 'left',
            },
            center: {
              align: 'center',
            },
          },
        },
        axisLine: {
          show: true, // 显示轴线
          lineStyle: {
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
        axisTick: {
          show: false, // 不显示刻度
        },
        type: 'category',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
        data: data?.map((e) => dayjs(e.date).format('MM-DD')),
      },
      yAxis: {
        type: 'value',
        minInterval: 1, // 设置最小间隔为1
        axisLine: {
          show: true, // 显示轴线
          lineStyle: {
            color: isLight ? style.neutralColorDividerLight : style.neutralColorDividerDark,
          },
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          data: data?.map((e) => e.alarmTimes),
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                {
                  offset: 0, // 0% 位置的颜色
                  color: 'rgba(63, 253, 255, .8)', // 颜色值
                },
                {
                  offset: 0.3, // 100% 位置的颜色
                  color: 'rgba(76, 104, 255, .8)', // 颜色值
                },
                {
                  offset: 1, // 100% 位置的颜色
                  color: 'rgba(76, 104, 255, .5)', // 颜色值
                },
              ],
            ),
            opacity: 0.1,
          },
          lineStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0, // 渐变方向，从上到下
              [
                {
                  offset: 0, // 0% 位置的颜色
                  color: '#3FFDFF', // 颜色值
                },
                {
                  offset: 1, // 100% 位置的颜色
                  color: '#4C68FF', // 颜色值
                },
              ],
            ),
          },
        },
      ],
    };
  }, [data, isLight]);

  useEcharts(chartRef, option);

  return (
    <Card
      title="报警处理"
      gap={0}
      style={{ flex: 1, maxWidth: '900px', minWidth: '400px' }}
      needRadio={false}
    >
      <div ref={chartRef} style={{ height: '152px' }} />
    </Card>
  );
};

export default AlarmTrend;
